<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="仪表识别 Example" />
<title>仪表识别 Example</title>
  <link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css" />
  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <link rel="stylesheet" href="layui/css/layui.css?t=1545041465480"  media="all">
 </head>
 
 <body>
  <div id="root">
    <div id="main">
	<script src="js/jquery-1.10.2.js"></script>
	<script src="layui/layui.all.js"></script>
<div class="container demo">
 <input class="layui-btn layui-btn-normal"  type="button" id="chImg" value="选择原图"/>
 <input id="fileBasePath" type="hidden" />
 </div>
 <div style="float: right; width: 100%; z-index: 9999;">
  <table style="margin-top: 1em;float:right">
    <tr>
     <td style="width: 10%;"><b>X<sub>1</sub>:</b><input type="text" id="x1" value="-" /></td>
     <td style="width: 20%;"><b>Width:</b><input type="text" value="-" id="w" /></td>
    </tr>
    <tr>
     <td><b>Y<sub>1</sub>:</b><input type="text" id="y1" value="-" /></td>
     <td><b>Height:</b><input type="text" id="h" value="-" /></td>
    </tr>
	<tr>
     <td><b>min刻度<sub></sub>:</b><input type="text" id="minKd" value="0" /></td>
     <td><b>min夹角<sub></sub>:</b><input type="text" id="minJj" value="0" /> 度</td>
    </tr>
	
	<tr>
     <td><b>max刻度<sub></sub>:</b><input type="text" id="maxKd" value="400" /></td>
     <td><b>max夹角<sub></sub>:</b><input type="text" id="maxJj" value="90" /> 度</td>
    </tr>
    
    <tr>
     <td><b>指针圆心X<sub></sub>:</b><input type="text" id="zhizhenYuanX" value="" /></td>
     <td><b>指针圆心Y<sub></sub>:</b><input type="text" id="zhizhenYuanY" value="" /></td>
    </tr>
    <tr>
     <td><b>threshold<sub></sub>:</b><input type="text" id="threshold" value="80" /></td>
      <td><b><sub></sub></b></td>
    </tr>
    
	
	<tr>
	    <td colspan="2">
	    	<div class="container demo">
					<input class="layui-btn layui-btn-normal"  type="button" id="orcSub" value="仪表提交识别"/>
					<input class="layui-btn layui-btn-normal"  type="button" id="xnSub" value="旋妞开关提交识别"/>
				</div>
		</td>
	</tr>
	
    <tr>
		<td><canvas id="myCan" width="600" height="600"></canvas></td>
		<td style="vertical-align:top">
			<label style="font-weight: bold;">识别结果：</label>
			<label id="resultJj" style="font-weight: bold;color: red;"></label><br/>
			<label id="resultXuanNiustatus" style="font-weight: bold;color: red;"></label><br/>
			<img id="resultImg" style="max-width: 360px;" src="" />
		</td>
    </tr>
   </tbody>
  </table>
 </div>
 </div>
<script type="application/javascript">
	var urlBase = "http://47.97.117.156:5200";
	$("#orcSub").click(function(){
	  	var body = {
	  	  "fileBasePath": $("#fileBasePath").val(),
			  "x1": $("#x1").val(),
			  "y1": $("#y1").val(),
			  "w": $("#w").val(),
			  "h": $("#h").val(),
			  "minKd": $("#minKd").val(),
			  "minJj": $("#minJj").val(),
			  "maxKd": $("#maxKd").val(),
			  "maxJj": $("#maxJj").val(),
			  "zhizhenYuanX":$("#zhizhenYuanX").val(),
			  "zhizhenYuanY":$("#zhizhenYuanY").val(),
			  "threshold":$("#threshold").val()
			};
			if($("#zhizhenYuanX").val()=='' || $("#zhizhenYuanY").val()==''){
				alert("请点击指针旋转中心，获取中心坐标");
			}
			
	  	$.ajax({  
            type: "POST",  
            url: urlBase + "/api/test/orc/v_1/v",  
            contentType: "application/json; charset=utf-8",  
            data: JSON.stringify(body),  
            dataType: "json",  
            success: function (data) {
							$("#resultImg").attr("src",data.result.orcImgUrl);
							$("#resultJj").text("夾角:" + data.result.jiaodu);
            },  
            error: function (message) {  
                alert("提交数据失败！");
            }  
        });
	});
	
	$("#xnSub").click(function(){
	  	var body = {
	  	  "fileBasePath": $("#fileBasePath").val(),
			  "x1": $("#x1").val(),
			  "y1": $("#y1").val(),
			  "w": $("#w").val(),
			  "h": $("#h").val(),
			  "similarityType": "typeA"
			};
	  	$.ajax({  
            type: "POST",  
            url: urlBase + "/api/test/orc/v_1/x",  
            contentType: "application/json; charset=utf-8",  
            data: JSON.stringify(body),  
            dataType: "json",  
            success: function (data) {
							//$("#resultImg").attr("src",data.orcImgUrl);
							if(data.result.simStatus == "1"){
								$("#resultXuanNiustatus").text("旋妞状态:OFF" );
							}
							if(data.result.simStatus == "0"){
								$("#resultXuanNiustatus").text("旋妞状态:ON" );
							}
							
            },  
            error: function (message) {  
                alert("提交数据失败！");
            }  
        });
	});
	
	$("#chImg").click(function(){
		layer.open({
		  maxmin: true, 
		  //closeBtn: 0, //不显示关闭按钮
		  type: 2,
		  title: '选择一张含有仪表的高清图片【选取需要识别的区域】',
		  shadeClose: false,
		  shade: 0,
		  area: ['98%', '98%'],
		  content: 'chouseImg.html' //iframe的url
		}); 
	});
	
	var cvs = document.getElementById('myCan');
	//对事件进行监听
	cvs.addEventListener('click', function(ev){
	   	var x, y;
		if (ev.layerX || ev.layerX == 0) {
		    x = ev.layerX;
		    y = ev.layerY;
		} else if (ev.offsetX || ev.offsetX == 0) { // Opera
		    x = ev.offsetX;
		    y = ev.offsetY;
		}
		$("#zhizhenYuanX").val(x);
		$("#zhizhenYuanY").val(y);
	}, false);
</script>
</body>
</html>